<template>
	<view :style="{'width':scWidht+'px','height':scHeight+'px'}">
		<!-- #ifdef H5 -->
		<topOpenBar url="newGift" :id="0"></topOpenBar>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<tt-bar leftIcon="icon-back" title=" " :showZhanwei="false" bgColor="rgba(0,0,0,0)" color="#ffffff">
			<template v-slot:rightCnt>
				<text class="iconfont icon-share rIcon" @tap="share"></text>
			</template>
		</tt-bar>
		<!-- #endif -->
		
		<image class="bg" :style="{'width':scWidht+'px','height':scHeight+'px'}" src="../../static/newerBg.png"></image>
		<view class="contener" :style="{'width':scWidht+'px','height':scHeight+'px'}">
			<image class="logo" src="../../static/nglogo.png" mode="widthFix" :style="{'margin-top':ptTop+'px'}"></image>
			<!-- 未登录 -->
			<block v-if="!isLogin">
				<image class="img2" src="../../static/newhand1.png" mode="widthFix"></image>
				<image class="img3" src="../../static/newhand2.png" mode="widthFix"></image>
				<view class="fromBox" v-if="!isLogin">
					<view class="row">
						<input type="number" placeholder="请输入手机号领取红包" maxlength="11" v-model="tel" :adjust-position="true" />
					</view>
					<view class="row">
						<input type="number" maxlength="6" placeholder="请输入验证码" v-model="msgCode" :adjust-position="true" />
						<button class="getBtn" :class="[isSendMsg?'active':'']" v-text="sendText" @tap="getMsgCode"></button>

					</view>

					<button class="postBtn" @tap="login">立即领取</button>
				</view>
			</block>
			<!-- 已登录 但未领取 -->
			<block v-if="isLogin && userInfo.registAward==0">
				<image class="img2" v-if="sucess==0" src="../../static/newhand1.png" mode="widthFix"></image>
				<image class="img3" src="../../static/newhand2.png" mode="widthFix"></image>
				<view class="fromBox" v-if="sucess==0">
					<text class="tishi">点击下方按钮领取成长基金</text>
					<button class="postBtn" @tap="getNewGift">立即领取</button>
				</view>
				<view class="fromBox" v-if="sucess==1" style="padding: 20upx 40upx;">
					<text class="shadowText">恭喜您已成功领取8888新人大礼包</text>
					<text class="sucText">领取到的红包可在<text class="scWt">“我的”-“优惠券”</text>中查看</text>
					<button class="postBtn" @tap="toPage" data-url="index" >去逛逛</button>
				</view>

			</block>
			<!-- 已登录 领取过   -->
			<block v-if="isLogin && userInfo.registAward==1">
				<view class="fromBox" style="padding: 20upx 40upx;">
					<image src="../../static/newhand3.png" mode="widthFix"></image>
					<text class="sucText">领取到的红包可在<text class="scWt">“我的”-“优惠券”</text>中查看</text>
					<button class="postBtn" @tap="toCenter">查看更多优惠</button>
				</view>
			</block>




			<!-- <view class="fromBox" v-if="sucess==1">
				<image src="../../static/newhand3.png" mode="widthFix"></image>
				<text class="sucText">领取到的红包可在<text class="scWt">“我的”-“优惠券”</text>中查看</text>
				<button class="postBtn" @tap="toPage" data-url="index">去逛逛</button>
			</view> -->
		</view>
		<shareAction ref="shareAction" :id="0" :type="8"></shareAction>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import shareAction from "@/components/shareAction/shareAction.vue";
	import topOpenBar from "@/components/h5/topOpenBar.vue";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		components: {
			shareAction,
			topOpenBar
		},
		data() {
			return {
				scWidht: uni.getSystemInfoSync().screenWidth,
				scHeight: uni.getSystemInfoSync().screenHeight,
				sucess: 0,
				tel: '',
				ptTop:uni.getSystemInfoSync().statusBarHeight,
				msgCode: '',
				isSendMsg: false,
				sendText: '获取验证码',
			};
		},
		methods: {
			share() {
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=newGift&id='+this.gid+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=newGift&id='+this.gid
				}
				this.$refs.shareAction.setShareData({
					title:'8888元成长基金任性送！',
					img:'http://s.de123.com/new_coupon.png',
					href:_href,
					cntText:''
				})
				this.$refs.shareAction.open()
			},
			getNewGift() {
				this.$store.dispatch("apiGetNewGift", {
					userId: this.userInfo.userId
				}).then(res => {
					this.sucess = 1;
					this.userInfo.registAward=1;
				})
			},
			toCenter() {
				uni.redirectTo({
					url: '../couponList/couponList'
				})
			},
			login() {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.isGetMsg) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else {
					// 验证登录流程
					this.$store.dispatch("apiUserLogin", {
							username: this.tel,
							code: this.msgCode
						})
						.then(res => {
							console.log(res);
							setTimeout(() => {
								this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {})
								// #ifdef APP-PLUS
								if (this.pushId) {
									this.$store.dispatch("eidtUserInfo", {
										userId: res.data.data.userId,
										pushId: this.pushId,
										imei: this.imei
									})
								}
								// #endif
							}, 500)
						})
				}
			},
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.isGetMsg = true; //修改状态
						let t = 60;
						this.sendText = t + "秒"
						this.isSendMsg = true;

						this.$store.dispatch("apiSendMsgCode", {
							phone: this.tel,
							type: '2'
						}).then(res => {
							const itval = setInterval(() => {
								t--;
								if (t < 1) {
									t = 60;
									this.sendText = "获取验证码"
									this.isSendMsg = false;
									clearInterval(itval);
								} else {
									this.isSendMsg = true;
									this.sendText = t + "秒"
								}
							}, 1000)
						})

					}
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			},
		},

	}
</script>

<style lang="less">
	image {
		display: block;
	}

	.contener {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 240upx;
		}

		.img2 {
			width: 50%;
			margin-top: 20upx;
		}

		.img3 {
			width: 100%;
		}
	}

	.fromBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20upx 60upx;

		.row {
			width: 100%;
			height: 80upx;
			border-radius: 40upx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 30upx;
			padding: 0 30upx;

			input {
				flex-grow: 1;
				font-size: 32upx;
			}

			.getBtn {
				margin: 0;
				padding: 0;
				background-color: rgba(0, 0, 0, 0);
				font-size: 28upx;
				color: #DD4A68;
				flex-shrink: 0;
			}

			.active {
				color: #aaaaaa !important;
			}

		}

		.shadowText {
			margin: 30upx 0;
			text-align: center;
			font-size: 56upx;
			font-weight: bold;
			color: #fff583;
			text-shadow: 4upx 4upx 4upx #A51515;
		}

		.tishi {
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			margin: 40upx 0;
		}

		.sucText {
			font-size: 32upx;
			text-align: center;
			color: #a82436;
			margin: 40upx 0;

			.scWt {
				color: #FFFFFF;
			}
		}

		.postBtn {
			background-color: #f42246;
			color: #FFFFFF;
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
		}
	}

	.rIcon {
		font-size: 40upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		margin-right: -10upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;

	}
</style>
